class FirstHeader extends HTMLElement {
    constructor() {
        super();
        // 创建 Shadow DOM
        this.attachShadow({ mode: 'open' });
    }

    // 在组件挂载后执行
    connectedCallback() {
        this.render();
        console.log("FirstHeader 已挂载");
        this.addScrollListener(); // 动态添加滚动事件监听
    }

    // 渲染组件内容
    render() {
        this.shadowRoot.innerHTML = `
<style>
    html, body {
        border: 0;
        /* overflow: hidden; */
    }
    /* 最顶部导航栏 */
    a,
    a:link,
    a:visited,
    a:hover,
    a:active {
        text-decoration: none;
        color: inherit;
    }
    button{
        border: 0;
        margin: 0;
        background-color: transparent;
        transition: background-color 0.3s ease;
    }
    body {
        margin: 0;
        padding: 0;

    }
    header {
        position: fixed;
        top: 5%;
        left: 50%;    
        transform: translate(-50%, -5%);
        padding: 20px;
        border-radius: 15px;
        width: 1200px;
        height: 30px;
        background-color: rgba(128, 128, 128, 0.4);
        z-index: 1000;
        transition: width 0.5s ease, height 0.5s ease, top 0.5s ease 
    }
        header:hover {
            background-color: #000000a8;
        }

    header.right button:hover {
        font-size: 25px;
    }

    .left {
        font-size: 30px;
        color: #fff;
        font-family: 'Times New Roman', Times, serif;
        animation: slideRight 1s ease forwards;
        font-weight: bold;
    }
     @keyframes slideRight {
            0% {
                transform: translateX(-100px);
            }

            100% {
                transform: translateX(0px);
                opacity: 1;
            }
        }

    nav {
        display: flex;
        justify-content: space-between;
        /* float: left; */
    }

    nav button {
        font-family: 'Times New Roman', Times, serif;
        font-size: 18px;
        color: #fff;
        margin-left: 20px;
         opacity: 0;
        transition: font-size 0.3s ease; 
        animation: slideTop 1s ease forwards;
        /* 设置动画效果 */
        animation-delay: calc(.1S * var(--i));
    }
          @keyframes slideTop {
            0% {
                transform: translateY(100px);
            }

            100% {
                transform: translateY(0px);
                opacity: 1;
            }
        }
    nav button:hover {
        align-content: center;
    }
    .middle {
        display: flex;
        gap: 15px;
        flex-direction: row;
        align-items: center;
        margin: 0 auto;

    }

    .middle button:hover{
        font-size: 25px;
    }
    .right {
        display: flex;
        justify-content: flex-end;
        padding-right:20px;
        animation: slideLeft 1s ease forwards;
    }
    @keyframes slideLeft {
            0% {
                transform: translateX(100px);
            }
            100% {
                transform: translateX(0px);
                opacity: 1;
            }
        }
    .login {
        border-radius: 5px;
        padding: 5px;
        background: #000;
        margin-left: 20px;
    }
    .login:hover {
        color: #000;
        font-size: bold;
        background: #fff;
    }
    header.shrink{
        top: 0;
        width:  100vw;
        border-radius: 0%; 
        transition: top 0.5s ease, width 0.5s ease; 
         background-color: #000000a8;
        
    }
</style>
<body>
    <header>
        <nav>
            <button class="left">First Blog</button>
            <div class="middle">
                <button style="--i:1" onclick="navigateTo('home')"><a href="./home.html">🏠首页</a></button>
                <button style="--i:2"onclick="navigateTo('study')"><a href="./study.html">📚学习日常</a></button>
                <button style="--i:3"onclick="navigateTo('view')"><a href="./view.html">🖼️家乡美景</a></button>
                <button style="--i:4"onclick="navigateTo('travel')"><a href="./travel.html">📸旅行日志</a></button>
                <button style="--i:5"onclick="navigateTo('message')"><a href="./message.html">📬留言</a></button>
               
            </div>
            <div class="right">
                <button class="login" onclick="navigateTo('login')"><a href="./login.html">登录/注册</a></button>
            </div>
        </nav>
    </header>
<script>
    window.addEventListener('scroll', function() {
    const header = document.querySelector('header');
    if (window.scrollY > 50) {  // 当页面滚动超过50px时
        header.classList.add('shrink');  // 增加shrink类
    } else {
        header.classList.remove('shrink');  // 移除shrink类
    }
});
</script>
</body>
        `;
    }

    // 处理滚动事件
    addScrollListener() {
        document.addEventListener('scroll', () => {
            const header = this.shadowRoot.querySelector('header');
            if (header) {
                if (window.scrollY > 50) {
                    header.classList.add('shrink');
                } else {
                    header.classList.remove('shrink');
                }
            }
        });
    }
}

// 注册自定义元素
customElements.define('first-header-a', FirstHeader);
